<script setup>
import { onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/userStore.js'
import { getShoppingCartApi } from '@/api/goods.js'
import { useCartStore } from '@/stores/cartStore.js'
import { useRouter } from 'vue-router'

const router = useRouter()
// 导航列表
const navList = [
  {
    name: '首页',
    path: '/home'
  },
  {
    name: '咨询',
    path: '/consult'
  },
  {
    name: '精选主题',
    path: '/handpick'
  },
  {
    name: '问答',
    path: '/QA'
  },
  {
    name: '个人中心',
    path: '/profile'
  },
  {
    name: '用户反馈',
    path: '/feedback'
  },
  {
    name: '商品',
    path: '/goods'
  }
]
const type = ref(0)// 搜索类型
const types = [
  {
    value: 0,
    label: '商品'
  },
  {
    value: 1,
    label: '视频'
  },
  {
    value: 2,
    label: '医师'
  }
]
const activeIndex = ref(0)
const userStore = useUserStore()
const keyword = ref('')
const footerList = [
  {
    title: '页脚标题1',
    text: ['页脚链接1', '页脚链接2', '页脚链接3']
  },
  {
    title: '页脚标题2',
    text: ['页脚链接1', '页脚链接2', '页脚链接3']
  },
  {
    title: '页脚标题3',
    text: ['页脚链接1', '页脚链接2', '页脚链接3']
  },
  {
    title: '页脚标题4',
    text: ['页脚链接1', '页脚链接2', '页脚链接3']
  }
]
const cartStore = useCartStore()
// 获取购物车信息
const getCartList = async () => {
  if (!userStore.user) {
    return
  }
  const res = await getShoppingCartApi(userStore.user.uid)
  cartStore.cartList = res.data
}
onMounted(() => getCartList())
/**
 * 搜索
 */
const goSearch = () => {
  if (type.value === 0) {
    router.push({ path: '/goods', query: { keyword: keyword.value } })
  } else if (type.value === 1) {
    router.push({ path: '/video', query: { keyword: keyword.value } })
  } else if (type.value === 2) {
    router.push({ path: '/doctor', query: { keyword: keyword.value } })
  }
}
</script>

<template>
  <div>
    <div class="nav">
      <div class="logo">
        <el-image fit="fill" src="src/static/test.png" style="width: 100%;height: 100%" />
      </div>
      <div class="nav-right">
        <router-link v-for="(item,index) in navList" :key="index"
                     :to="item.path"
                     class="nav-right-item">
          {{ item.name }}
        </router-link>
      </div>
      <el-select
        v-model="type"
        placeholder="商品"
        size="small"
        style="width: 90px;height: 20px;margin-right: 10px"
      >
        <el-option
          v-for="item in types"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="keyword"
        :suffix-icon="Search"
        placeholder="请输入内容"
        style="width: 240px;"
        @keyup.enter="goSearch"
      />
      <div class="nav-left">
        <router-link style="margin-right: 20px" to="/cart">
          <el-badge :max="99" :value="cartStore.cartList?.reduce((sum,item)=>sum+=item.count,0)" class="item">
            <el-icon color="#39c5bb" size="24">
              <ShoppingCart />
            </el-icon>
          </el-badge>
        </router-link>
        <div v-if="!userStore.user" style="display: flex;justify-content: center;align-items: center">
          <router-link class="nav-left-item" to="/login">
            <el-button color="#0FBCE5" round style="color: #ffffff">登录</el-button>
          </router-link>
          <router-link class="nav-left-item" to="/login">
            注册
          </router-link>
        </div>
        <router-link v-else style="display: flex;justify-content: center;align-items: center;gap: 10px" to="/profile">
          <el-avatar :src="userStore.user.avatar" shape="circle"></el-avatar>
          <el-text>{{ userStore.user.name }}</el-text>
        </router-link>
      </div>
    </div>
    <div class="main-container">
      <router-view></router-view>
    </div>
    <div class="footer">
      <div v-for="(item,index) in footerList" :key="item.title" class="footer-item">
        <h3>{{ item.title }}</h3>
        <div v-for="(text) in item.text" :key="text">{{ text }}</div>
      </div>
      <div class="footer-item" style="font-weight: bold;">
        <div>页脚其他信息页脚其他信息</div>
        <div>页脚其他信息页脚其他信息</div>
        <div>页脚其他信息页脚其他信息</div>
      </div>
      <div style="display: flex;gap: 20px">
        <div class="footer-QR">
          <img alt="微信二维码" height="100%" src="../static/QR.png" width="100%" />
          <div>微信二维码</div>
        </div>
        <div class="footer-wx">
          <img alt="微信二维码" height="100%" src="../static/wx.png" width="100%" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.router-link-active {
  color: $lt-main-text-color;
  transform: scale3d(1.1, 1.1, 1);
}

.nav {
  z-index: 99;
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  align-items: center;
  font-size: 14px;
  height: 50px;
  background-color: #fff;
  min-width: 600px;
  box-shadow: 1px 1px 5px #f1f1f1;

  .logo {
    width: 200px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10%;
    margin-left: 20px;
  }

  &-right {
    width: 50%;
    display: flex;
    justify-content: space-around;
    padding-right: 15%;

    &-item {
      padding: 0 10px;
      transition: all 0.15s ease-in-out;

      &:hover {
        color: $lt-main-text-color;
      }
    }
  }

  &-left {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    gap: 15px;

    &-item {
      padding: 0 10px;
    }
  }
}

.main-container {
  background-color: $lt-main-bg-color;
  padding: 60px 0 100px;
  min-height: 80vh;
}

.footer {
  width: 100%;
  height: 160px;
  background-color: gray;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 16px;
  padding-top: 10px;

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  &-QR {
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  &-wx {
    width: 100px;
    height: 100px;
  }
}
</style>